/*
# Copyright (c) 2024 RapidStream Design Automation, Inc. and contributors.
# All rights reserved. The contributor(s) of this file has/have agreed to the
# RapidStream Contributor License Agreement.
*/

@import url("./button.css");

/* Ref: light theme of egui
https://github.com/emilk/egui/blob/cf965aaa/crates/egui/src/style.rs#L1339 */
:root {
	--fg1: #3C3C3C; /* rgb(60, 60, 60) */
	--fg2: #505050; /* rgb(80, 80, 80) */
	--bg1: #FCFCFC; /* rgb(252, 252, 252) ≈ from_additive_luminance(5) */
	--bg2: #F8F8F8; /* rgb(248, 248, 248) */
	--border: #BEBEBE; /* rgb(190, 190, 190) */
	--select: #90D1FF; /* rgb(144, 209, 255) */
	--warn:   #FF6400; /* rgb(255, 100, 0) */
	--error:  #FF0000; /* rgb(255, 0, 0) */

	color: var(--fg1);
	background-color: var(--bg1);
}

:link {
	color: #009BFF; /* rgb(0, 155, 255) */
}
::selection {
	background-color: #90D1FF;
}

header,
.sidebar-tabs,
.sidebar-contents details > summary {
	color: var(--fg2);
	background-color: var(--bg2);
}

/* header */
header {
	box-sizing: border-box;
	min-height: 2rem;
	padding: .1rem 1.5rem;
}

/* Don't wrap btn tooltip like "Toggle Sidebar" on wide screen */
@media (min-width: 75rem) { /* 75rem * 16px = 1200px = xl in Bootstrap */
	header { padding: .1rem 2.75rem; }
	header .btn > .btn-text { white-space: pre; }
}

header,
header .flex {
	display: flex;
	align-items: center;
	gap: .5rem;
}

header .tools { margin-left: auto; }
header .tools hr { height: 1rem; margin: 0; }


/* main */
main {
	width: 75vw;
	min-width: 40vw;
	max-width: 85vw;
	overflow: hidden;
	resize: horizontal;
}

main > .graph-container > .tooltip {
	overflow-wrap: anywhere;
}

/* aside */
.sidebar-tabs {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: .5rem .25rem;
}

.sidebar-contents {
	flex: 1;
	font-size: .9rem;
}

.sidebar-contents section {
	display: none;
}
.sidebar-tabs:has(.btn-details     > input:checked) + .sidebar-contents > .details,
.sidebar-tabs:has(.btn-connections > input:checked) + .sidebar-contents > .connections,
.sidebar-tabs:has(.btn-source      > input:checked) + .sidebar-contents > .source {
	display: block;
}

.sidebar-contents details > summary,
.sidebar-contents details > div {
	contain: content;
	box-sizing: border-box;
	border-bottom: 1px solid var(--border);
}

/* aside contents - summary */
.sidebar-contents .source-summary,
.sidebar-contents details > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .5rem;
	line-height: 1;
}

.sidebar-contents details > summary {
	list-style: none;
}
.sidebar-contents details > summary > .lucide-chevron-down {
	transition: transform .1s linear;
}
.sidebar-contents details[open] > summary > .lucide-chevron-down {
	transform: rotate(180deg);
}

.sidebar-contents details > div > p:only-child {
	text-align: center;
}

.sidebar-contents > .connections > details > div {
	padding: 0 .5rem;
}

/* aside contents - ol ul dl */
.sidebar-contents p,
.sidebar-contents ol,
.sidebar-contents ul {
	margin-top: .5rem;
	margin-bottom: .5rem;
}
.sidebar-contents ol,
.sidebar-contents ul {
	padding-inline-start: 1em;
}
.sidebar-contents ul {
	list-style-type: "• ";
}
.sidebar-contents dl {
	margin: 0;
	padding: .5rem;
}
.sidebar-contents dl > dt {
	color: var(--fg2);
	font-weight: bold;
	font-size: .85rem;
}
.sidebar-contents dl > dd {
	margin: 0;
	margin-top: .1rem;
	margin-bottom: .25rem;
	font-family: monospace;
}
